<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electromagnetic Field</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // --- Draw Magnetic Field ---
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';
    const crossSize = 5;

    function drawCross(x, y, size) {
        ctx.moveTo(x - size, y - size);
        ctx.lineTo(x + size, y + size);
        ctx.moveTo(x + size, y - size);
        ctx.lineTo(x - size, y + size);
    }

    // Positions of crosses to mimic the image's layout
    const crosses = [
        // Top row
        {x: 90, y: 150}, {x: 140, y: 150}, {x: 190, y: 150}, {x: 240, y: 150},
        // Middle area
        {x: 350, y: 140}, {x: 420, y: 175},
        // Bottom row
        {x: 70, y: 250}, {x: 120, y: 250}, {x: 170, y: 250}, {x: 220, y: 250},
        {x: 270, y: 250}, {x: 320, y: 250}, {x: 370, y: 250}, {x: 420, y: 250}
    ];
    crosses.forEach(p => drawCross(p.x, p.y, crossSize));
    ctx.stroke();

    // --- Draw Conductor ---
    // Parameters
    const xb = 220;
    const yb = 200;
    const L = 140; // length in pixels
    const wireThickness = 8;
    const w = wireThickness / 2;
    const angle = 30 * Math.PI / 180;
    
    const xa = xb - L;
    const ya = yb;
    const xc = xb + L * Math.cos(angle);
    const yc = yb - L * Math.sin(angle);

    // Draw using filled rectangles for sharp corners and ends
    ctx.fillStyle = 'black';
    // Segment ab
    ctx.fillRect(xa, ya - w, L, wireThickness);
    // Segment bc
    ctx.save();
    ctx.translate(xb, yb);
    ctx.rotate(-angle);
    ctx.fillRect(0, -w, L, wireThickness);
    ctx.restore();

    // --- Draw Labels and Annotations ---
    // Labels a, b, c
    ctx.font = '20px sans-serif';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText('a', xa, yb + 28);
    ctx.fillText('b', xb, yb + 28);
    ctx.fillText('c', xc + 15, yc - 5);

    // Label B
    ctx.font = 'italic 24px serif';
    ctx.textAlign = 'start';
    ctx.fillText('B', 180, 100);

    // Velocity vector v
    const arrowY = 175;
    const arrowStartX = 260;
    const arrowEndX = 380;
    const arrowHeadSize = 8;
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(arrowStartX, arrowY);
    ctx.lineTo(arrowEndX, arrowY);
    ctx.stroke();
    // Arrowhead
    ctx.beginPath();
    ctx.moveTo(arrowEndX, arrowY);
    ctx.lineTo(arrowEndX - arrowHeadSize, arrowY - arrowHeadSize * 0.7);
    ctx.lineTo(arrowEndX - arrowHeadSize, arrowY + arrowHeadSize * 0.7);
    ctx.closePath();
    ctx.fillStyle = 'black';
    ctx.fill();
    // Label v
    ctx.font = 'italic bold 20px serif';
    ctx.textAlign = 'center';
    ctx.fillText('v', arrowStartX - 20, arrowY + 6);

    // Angle annotation
    const dashedLineLength = 50;
    const arcRadius = 30;
    ctx.lineWidth = 1;
    // Dashed line
    ctx.beginPath();
    ctx.setLineDash([4, 3]);
    ctx.moveTo(xb, yb);
    ctx.lineTo(xb + dashedLineLength, yb);
    ctx.strokeStyle = 'black';
    ctx.stroke();
    ctx.setLineDash([]);
    // Arc
    ctx.beginPath();
    ctx.arc(xb, yb, arcRadius, 0, -angle, true);
    ctx.stroke();
    // Angle text
    ctx.font = '18px sans-serif';
    ctx.textAlign = 'left';
    ctx.fillText('30°', xb + arcRadius + 5, yb - 10);

    // --- Draw Bottom Text ---
    ctx.font = '20px "Songti SC", "SimSun", serif';
    ctx.textAlign = 'center';
    ctx.fillText('题 1 图', canvas.width / 2, canvas.height - 20);

</script>
</body>
</html>